// 暗夜
@media (prefers-color-scheme: dark) {
    body {
        color: #ffffff;
        background: radial-gradient(
            123.22% 129.67% at 100.89% -5.6%,
            #201d47 0%,
            #17153a 100%
        );

        // scrollbar--->
        .el-scrollbar {
            &:hover {
                .el-scrollbar__thumb {
                    background-color: rgba(232, 234, 237, 0.4);
                }
            }
            .el-scrollbar__thumb:hover {
                background-color: rgba(232, 234, 237, 0.8);
            }
        }
        .el-input__inner {
            background-color: #ffffff;
        }
        // <---scrollbar

        // message--->
        .el-message {
            filter: drop-shadow(0px 6px 10px rgba(38, 41, 63, 0.3));
        }
        .MMmessage {
            border-color: #26293f;
            background: #26293f;
            color: #ffffff;
        }
        // <---message

        // dialog--->
        .el-dialog__headerbtn .el-dialog__close,
        .el-dialog__title,
        .el-message-box__content,
        .el-dialog__body {
            color: #ffffff;
        }
        .el-dialog__wrapper {
            .el-dialog {
            }
        }
        .el-dialog__wrapper .el-dialog {
            background: radial-gradient(
                123.22% 129.67% at 100.89% -5.6%,
                #201d47 0%,
                #17153a 100%
            );
            box-shadow: 0 1px 8px rgba(232, 215, 215, 52%);
        }
        // <---dialog

        // form--->
        .el-form-item__label {
            color: #ffffff;
        }
        .el-form-item__label:before {
            font-size: 18px;
        }
        // <---form

    }
}

// 正常
@media (prefers-color-scheme: light) {
    body {
        color: #26293f;
        background: radial-gradient(
            123.22% 129.67% at 100.89% -5.6%,
            #ffffff 0%,
            #fefeff 100%
        );

        // scrollbar--->
        .el-scrollbar__thumb:hover {
            background-color: rgba(44, 62, 80, 0.8);
        }
        // <---scrollbar

        // message--->
        .el-message {
            filter: drop-shadow(0px 6px 10px rgba(101, 101, 101, 0.25));
        }
        .MMmessage {
            border-color: #ffffff;
            background: #ffffff;
            .el-message__closeBtn,
            .el-message__content {
                color: #26293f !important;
            }
        }
        // <---message

        // dialog--->
        .el-dialog__headerbtn .el-dialog__close,
        .el-dialog__title,
        .el-message-box__content,
        .el-dialog__body {
            color: #26293f;
        }
        .el-dialog__wrapper {
            .el-dialog {
            }
        }
        .el-dialog__wrapper .el-dialog {
            background: #fbfbfb;
            box-shadow: 0 1px 8px rgba(214, 214, 214, 0.52);
        }
        // <---dialog
    }
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: color 0.3s, background 0.3s;
    box-sizing: border-box;
    padding: 4px;
    margin: 0;

    // scrollbar--->
    .el-scrollbar {
        .el-scrollbar__wrap {
            overflow-x: auto;
            overflow-y: auto;
        }
    }
    // <---scrollbar

    // message--->
    .el-message {
        padding: 12px 16px;
        border-radius: 8px;

        .el-icon-success,
        .el-icon-warning,
        .el-icon-error,
        .el-icon-info,
        .el-icon-close,
        .el-message__content {
            font-size: 14px;
            line-height: 140%;
            color: #ffffff;
        }
        .el-icon-info {
            font-weight: 700;
        }
    }
    .MMError {
        // 错误
        border-color: #DE1306;
        background: #DE1306;
    }
    .MMWarning {
        // 警告
        border-color: #ff8a00;
        background: #ff8a00;
        color: #ffffff;
    }
    .MMSuccess {
        // 成功
        border-color: #22abf3;
        background: #22abf3;
        color: #ffffff;
    }
    // <---message

    // dialog--->
    .el-dialog__wrapper {
        .el-dialog {
            border-radius: 36px;
            min-width: 328px;
            max-height: 88%;
            transition: width 0.3s;
        }
        .el-dialog__header {
        }
        .el-dialog__body {
            padding-top: 0;
            padding-bottom: 0;
        }
        .el-dialog__footer {
            text-align: center;
        }
        .el-dialog__headerbtn .el-dialog__close,
        .el-dialog__title {
            font-size: 18px;
            font-weight: 700;
        }
    }
    // <---dialog

    // button--->
    .el-button {
        border-radius: 8px;
    }
    // <---button

    // form--->
    .el-form-item--mini .el-form-item__error {
        margin-top: 4px;
    }
    // <---form

    // 文字超出显示...
    .textEllipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
